<template>
	<view style="padding-bottom: 150upx;background-color: #fff;">
			<image src="../../static/back.png" mode="" style="width: 40upx;height: 44upx;position: fixed;top: 50upx;left: 30upx;z-index: 99;" @click="back"></image>
			<!-- 			<h2>{{zhinfo.circle_name}}</h2>
						<h3><text>{{zhinfo.start_time}}</text>-<text>{{zhinfo.end_time}}</text></h3>
						<h4>地址：{{zhinfo.shengshiqu}} {{zhinfo.address}}</h4> -->
<!-- 		<view class="header"
			:style="{backgroundImage: 'url(' + zhinfo.picture + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
		</view> -->
		<view class="header">
			<image :src="zhinfo.picture" mode="" style="width: 100%;height: 500upx;"></image>
		</view>
		
		<view class="djs">
			<h2>开展倒计时</h2>
			<uni-countdown color="#fff" background-color="#2596FF" border-color="#2596FF" font-size="48" :show-day="true" :day="day" :hour="hours" :minute="min" :second="seconds"></uni-countdown>
		</view>
		<view class="nav">
			<view class="tou">
				<text class="yuan"></text>
				<text style="font-size: 48upx;font-family: Source Han Sans CN;font-weight: 500;color: #333333;z-index: 1;">展会简介</text>
			</view>
			<text style="font-size: 30upx;">{{zhinfo.details}}</text>
			<view class="genduo" @click="tozhishi">
				查看更多参展知识
			</view>
		</view>
		<view class="content">
			<view class="tou">
				<text class="yuan" style="left: 252upx;"></text>
				<text style="font-size: 48upx;font-family: Source Han Sans CN;font-weight: 500;color: #333333;z-index: 1;">展会类别</text>
			</view> 
			<view class="content-nav">
				<view v-for="item in fenlei" style="width: 25%;">
					<image :src="item.img_url" mode="" style="width: 120upx;height: 120upx;border-radius: 50%;"></image>
					<text>{{item.class_name}}</text>
				</view>
			</view>
<!-- 		<view class="content-gg">
				<view
					style="padding: 24upx;display: flex;justify-content: space-between;align-items: center;border-bottom: 2upx solid #F5F5F5;"
					@click="tozhishi">
					<text>参展知识</text>
					<image src="../../static/zhanhui/backk.png" mode="" style="width: 20upx;height: 20upx;"></image>
				</view>
				<view style="padding: 24upx;display: flex;justify-content: space-between;align-items: center;"
					@click="tolx">
					<text>联系我们</text>
					<image src="../../static/zhanhui/backk.png" mode="" style="width: 20upx;height:20upx;"></image>
				</view>
			</view> -->
			<view class="shipin">
				<view class="tou">
					<text class="yuan" style="left: 222upx;"></text>
					<text style="font-size: 48upx;font-family: Source Han Sans CN;font-weight: 500;color: #333333;z-index: 1;">展会动态</text>
				</view> 
					<view :class="isStyle?'works_box':'works_boxs'">
						<view v-for="(item,index) in splist" :index="index" class="mo">
							<view class='item' @click="navPlayer(item.shop_id,index,item.video_id)">
								<image :src='item.cover_img' style="width: 340upx;height: 450upx;border-radius: 10upx 10upx 0px 0px;"></image>
								<text class="title">{{item.title}}</text>
							</view>
						</view>
					</view>
					<view style="color: #999999;display: flex;align-items: center;justify-content: center;padding-top: 20upx;" @click="more" v-show="isStyle" v-if="splist.length>6">查看更多<image src="../../static/zhanhui/xiala.png" mode="" style="width: 19upx;height: 10upx;"></image></view>
			</view> 
		</view>
		<view class="content-bottom">
			<view class="list">
				联系人：<text>候队长</text>
			</view>
			<view class="list" style="display: flex;justify-content: space-between;">
				<view>联系电话：<text>15855884488</text></view>
				<image src="../../static/zhanhui/phone.png" mode="" style="width: 30upx;height: 34upx;" @click="call"></image>
				
			</view>
			<view class="list">
				邮箱：<text>56465123@qq.com</text>
			</view>
			<view class="list">
				地址：<text>长沙市 岳麓区 车队长科技</text>
			</view>
			<view class="list">
				网址：<text>www.baidu.com</text>
			</view>
		</view>
		<view class="bottoms">
			<view class="cc" @click="baomings" style="display: flex;flex-direction: column;">
				<text>我要参展</text>
				<text>({{guanren}}人已报名参展)</text>
			</view>
			<view class="cg" @click="baoming" style="display: flex;flex-direction: column;" v-if="is_sign  !== 1">
				<text>我要参观</text>
				<text>({{ren}}人已报名参观)</text>
			</view>
			<view class="cg" style="display: flex;flex-direction: column;background-color: #999999;width: 340upx;height: 80upx;line-height: 80upx;" v-else>
				<text>已报名参观</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhinfo: {},
				fenlei: [],
				shopId: '',
				circle_id: '',
				page: 1,
				day: 0,
				seconds: 0,
				hours: 0,
				min: 0,
				page_size: 10,
				splist: [],
				ppid: '',
				ren: 0,
				guanren: 0,
				djs:'',
				isStyle:true,
				userInfos:{},
				is_sign:'',
				userid:'',
			}
		},
		onLoad(option) {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					this.userInfos = value
					var userInfos = JSON.parse(this.userInfos)
				}
			} catch (e) {
				// error
			}
			this.shopId = option.shop_id
			this.circle_id = option.circle_id
			this.userid = option.useid
			uni.request({
				url: "http://dsx.cdzer.com/api/Circle/exhibition", //仅为示例，并非真实接口地址。
				data: {
					circle_id: option.circle_id,
					uid:this.userid
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
						var  date1 =parseInt(new  Date().getTime());
						var date2 = parseInt(date1/1000)
					this.zhinfo = res.data.data.circle_info
					// this.djs = date2-res.data.data.circle_info.start_time
					this.fenlei = res.data.data.circle_class
					this.ren = res.data.data.member_num
					this.guanren = res.data.data.shops_num
					this.is_sign = res.data.data.is_sign
					let down_time = res.data.data.circle_info.start_time-date2
					this.day = Math.floor(down_time / (24 * 3600))
					this.hours = Math.floor((down_time - this.day*86400) / 3600)
					this.min = Math.floor((down_time - this.day*86400 - this.hours * 3600) / 60)
					this.seconds = parseInt(Math.floor((down_time - this.day*86400 - this.hours * 3600 - this.min * 60) / 60))
					console.log('aaa', this.day, '天', this.hours, '小时', this.min, '分', this.seconds)
					console.log(this.djs,date2,res.data.data.circle_info.start_time,"倒计时呀呀呀")
				}
			});
			uni.request({
				url: "http://dsx.cdzer.com/api/Circle/activities_beforevideo", //仅为示例，并非真实接口地址。
				data: {
					circle_id: this.circle_id,
					shop_id: this.shopId,
					page: this.page,
					page_size: this.page_size,
					uid:userInfos.id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
					console.log(res, "展前视频")
					this.splist = res.data.data
				}
			});
		
			
			 // Date.parse(date1)
			 // console.log(new  Date().getTime(),"是不是时间戳")
		},
		methods: {
			more(){
				this.isStyle =false
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			call(){
				uni.makePhoneCall({
					phoneNumber: '15855884488',
					success() {
				
					}
				})
			},
			daojs() {
				
			},
			tozhishi() {
				uni.navigateTo({
					url: `./zhishi?circle_id=${this.circle_id}`
				})
			},
			baoming() {
				uni.navigateTo({
					url: `./baoming?circle_id=${this.circle_id}`
				})
			},
			baomings() {
				uni.navigateTo({
					url: `./baoming?circle_id=${this.circle_id}&title="参展"`
				})
			},
			tolx() {
				console.log(this.shopId)
				uni.navigateTo({
					url: `./lianxi?shop_id=${this.shopId}&circle_id=${this.circle_id}`
				})
			},
			navPlayer(id, index, ppid) {
				var shipin = JSON.stringify(this.splist)
				uni.navigateTo({
					url:'./player?shpo_id=' + id + '&index=' + index + '&page=' + this
						.page + '&shipin=' + shipin
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tou {
		position: relative;
	
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
	}
	.title{
		font-size: 30upx;
		// width: 320upx;
		width: 329upx;
		text-align: center;
		border-radius: 0px 0px 10upx 10upx;
		background-color: #359EFF;
		padding: 6upx;
		color: #fff;
		white-space: nowrap;   //规定段落中的文本不进行换行
		text-overflow:ellipsis;
		overflow:hidden;
	}
	uni-page-body{
		background-color: #fff!important;
	}
		.content-bottom{
			width: 94%;
			height: 450upx;
			display: flex;
			flex-direction: column;
			margin: 0 auto;
			margin-top: 30upx;
			background-color: #F5F5F5;
			padding: 24upx;
			color: #666666;
			.list{
				display: flex;
				align-items: center;
				padding: 22upx 0;
				height: 88upx;
				border-bottom: 2upx solid #fff;
			}
		}
	
	.yuan {
		width: 50upx;
		height: 50upx;
		position: absolute;
		left: 220upx;
		top: -1px;
		// display: inline-block;
		// border: 7upx solid linear-gradient(125deg, #2596FF, #FFFFFF);
		// background: linear-gradient(125deg, #2596FF, #FFFFFF);
		background: url(../../static/yuan.png) no-repeat;
		background-size: cover;
		// opacity: 0.7;
		// border-radius: 50%;
	}
	.djs {
		width: 690upx;
		height: 200upx;
		background: linear-gradient(-90deg, #2596FF, #74BCFF, #329DFF);
		border-radius: 20upx;
		margin: 0 auto;
		margin-top: 50upx;
		display: flex;
		flex-direction: column;
		color: #fff;
		justify-content: center;
		align-items: center;
	}
	.works_boxs{
		display: flex;
		flex-wrap: wrap;
		height: auto;
		overflow: hidden;
		justify-content: space-between;
		.mo {
			// padding-left: 10upx;
			// width: 46%;
			flex-direction: column;
			    margin-top: 20upx;
			    align-items: center;
			    justify-content: center;
		}
		.item{
			display: flex;
			    flex-direction: column;
		}
	}
	.works_box {
		display: flex;
		flex-wrap: wrap;
		// height: 1580upx;
		overflow: hidden;
		justify-content: space-between;
		.mo {
			// padding-left: 10upx;
			// width: 46%;
			flex-direction: column;
			    margin-top: 20upx;
			    align-items: center;
			    justify-content: center;
		}
		.item{
			display: flex;
			    flex-direction: column;
		}
	}


	.bottoms {
		width: 100%;
		height: 100upx;
		align-items: center;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		z-index: 999;
		.cc {
			width: 340upx;
			// height: 80upx;
			text-align: center;
			// line-height: 80upx;
			border-radius: 15upx;
			color: #FF3D3D;

			background: #FFF1F1;
		}

		.cg {
			width: 340upx;
			// height: 80upx;
			text-align: center;
			// line-height: 80upx;
			border-radius: 15upx;
			background-color: #FF3D3D;
			margin-left: 20upx;
			color: #fff;
		}
	}

	.header {
		// background: url(../../static/zhanhui/header.png) no-repeat;
		width: 100%;
		height: 500upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		h2,
		h4,
		h3,
		h5 {
			color: #FFFFFF;
			padding-top: 18upx;
		}
	}

	.nav {
		padding: 30upx;
		color: #666666;
		font-size: 24upx;

		.tou {
			position: relative;

			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
		}

		.genduo{
			width: 600upx;
			height: 80upx;
			background: #359EFF;
			text-align: center;
			margin-top: 50upx;
			border-radius: 16upx;
			margin-left: 44upx;
			font-size: 36upx;
				line-height: 80upx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	 .content {
		width: 100%;
		display: flex;
		flex-direction: column;

		// justify-content: center;
		.content-nav {
			display: flex;
			padding: 30upx;
			flex-wrap: wrap;
			justify-content: space-around;

			view {
				width: 25%;
				display: flex;
				flex-direction: column;
				padding-top: 30upx;
				justify-content: center;
				align-items: center;

				text {
					margin-top: 20upx;
				}
			}
		}

		.content-gg {
			width: 100%;
			height: 176upx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
		}

		.shipin {
			padding: 30upx;
		}
	}
</style>
